<template>
  <van-cell>
    <van-image
      slot="icon"
      class="avatar"
      round
      fit="cover"
      center
      :src="commentItem.user_info.avatar"
    />
    <div slot="title" class="title-wrap">
      <span>{{commentItem.user_info.nickname ? commentItem.user_info.nickname : commentItem.user_info.username}}</span>
    <div slot="value" class="time">{{ commentItem.add_time }}</div>
    </div>
    <div slot="label" class="comment-content">{{ commentItem.content }}</div>
  </van-cell>  
</template>

<script>
export default {
name: 'comment',
props: {
  commentItem: {
    type: Object,
    default: () => []
  },
},
}
</script>

<style lang="less" scoped>
  .avatar {
    width: 72px;
    height: 72px;
    margin-right: 25px;
  }
  .title-wrap {
    display: flex;
    justify-content:space-between;
  }
  .comment-content {
    font-size: 28px;
    color: #222222;
    word-break: break-all;
    text-align: justify;
  }
  .time {
        font-size: .26667rem;
    color: #666;
    line-height: .66667rem;
  }

  /deep/ .van-cell::after{
    border-bottom: 1px solid #000!important;
  }
</style>